<%--
  Created by IntelliJ IDEA.
  User: 21309
  Date: 2024/11/18
  Time: 15:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人资料编辑页面</title>
    <link rel="stylesheet" href="../css/nav.css" />
    <link rel="stylesheet" href="../css/user.css" />

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <style>
        .head_center{
            a{
                text-decoration: none;
                color: #1d2124;
            }
            a:hover{
                color:#00aaff;
            }
        }
        .content {
            height: 600px; /* 减去导航栏高度 */
            overflow-y: auto;
            padding: 20px;
        }

        /* 美化滚动条样式 */
        .content::-webkit-scrollbar {
            width: 6px;
        }

        .content::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .content::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 3px;
        }

        .content::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* 其他样式保持不变 */
        .appointment-item {
            background: #f5f5f5;
            border-radius: 4px;
            padding: 20px;
            margin-bottom: 15px;
        }

        .appointment-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            color: #666;
        }

        .status-box {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .status-tag {
            background: #e6f7ff;
            color: #1890ff;
            padding: 2px 8px;
            border-radius: 2px;
        }

        .service-box {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }

        .service-img {
            width: 80px;
            height: 80px;
            background: #ddd;
        }

        .action-box {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .cancel-btn {
            background: #1890ff;
            color: white;
            border: none;
            padding: 5px 15px;
            border-radius: 2px;
            cursor: pointer;
        }

        .detail-link {
            color: #1890ff;
            text-decoration: none;
        }

        .detail-link:hover {
            text-decoration: underline;
        }

        .count-info {
            color: #666;
            padding: 10px 0;
            border-top: 1px solid #ddd;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<jsp:include page="nav.jsp" />
<div class="all">
    <div class="user_left">
        <!-- 个人中心区域 -->
        <div class="user_head">
            <img src="../img/people.png" alt="用户头像" class="head-pic">
            <div class="head_have">
                <p class="username">用户名</p>
                <p class="user-status">欢迎回来</p>
            </div>
        </div>
        <br><br>
        <div class="head_left">
            <p>收藏</p>
            <p>13</p>
        </div>
        <div class="head_right">
            <p>点赞</p>
            <p>31</p>
        </div>
        <br>
        <hr size="5px" color="grey" />
        <div class="head_center">
            <h4>个人设置</h4>
            <h3><a href="myUser.jsp">我的预约</a></h3>
            <h3><a href="user.jsp" >个人资料</a></h3>
            <h3><a href="user_anquan.jsp">账号安全</a></h3>
            <h3><a href="message.jsp">系统通知</a></h3>
        </div>
    </div>
    <div class="content">
        <h2>我的预约</h2>
        <div id="reservation-list">
            <!-- 第一个预约卡片 -->
        </div>

        <!-- 底部计数信息 -->
        <div class="count-info">
            共<span id="numTotal"></span>件
<%--            <a href="#" class="detail-link">详情</a>--%>
        </div>
    </div>
</div>
<script src="../js/myUser.js"></script>
<jsp:include page="modal.jsp"/>
</body>
</html>